﻿@model Event

@{
    ViewBag.Title = "Event";

    var category = string.Empty;
    if (Model.Type != null)
    {
        category = " | " + Model.Type.Name;
    }
}

<div class="page-header">
    <h5>
        @Model.StartDate.ToString("dddd, d. MMM. yyyy")
        @category
    </h5>
    <h1>
        <span class="glyphicon glyphicon-calendar"></span> @Model.Name
        @if (!string.IsNullOrEmpty(Model.Location))
        {
            string.Format("({0})", Model.Location);
        }
    </h1>
    <h5>
        @Html.DisplayFor(m => m.MeetingTime) - @Html.DisplayFor(s => s.StartingTime)
    </h5>
</div>

@if (!ViewData.ModelState.IsValid)
{
    <div class="alert alert-danger alert-dismissable">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        @Html.ValidationSummary("Fejl")
    </div>
}

<div class="row">
    <div class="col-md-8">
        @if (!Model.IsExpired)
        {
            var btnTxt = string.Empty;
            var actionName = string.Empty;
            var btnClass = string.Empty;

            if (ViewBag.JoinedAlready)
            {
                btnTxt = "Frameld";
                actionName = "Leave";
                btnClass = "btn-info";
            }
            else
            {
                btnTxt = "Tilmeld";
                actionName = "Join";
                btnClass = "btn-info";
            }

            using (Html.BeginForm(actionName, "Event", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal" }))
            {
                @Html.AntiForgeryToken()
                @Html.HiddenFor(x => x.Id)
                <input type="submit" class="btn @btnClass" value="@btnTxt">
            }
        }
        <br>
        @Html.Raw(Model.ContentAsHtml)
    </div>
    <div class="col-md-4">
        <div class="well">
            <div class="row">
                <div class="col-md-6">
                    <h4>Bane</h4>
                    @if (Model.Course == null)
                    {
                        <span>Ingen bane info</span>
                    }
                    else
                    {
                        @Model.Course.Name<br>
                        @Model.Course.Address<br>
                        @Model.Course.ZipCode
                        @Html.Raw("&nbsp;")
                        @Model.Course.City<br>

                        if (ViewBag.Player != null)
                        {
                            <a href="https://maps.google.dk/maps?saddr=@ViewBag.Player.Address,@ViewBag.Player.City&daddr=@Model.Course.Address,@Model.Course.City" target="_blank">rutevejledning</a>
                        }
                    }
                </div>
                <div class="col-md-6">
                    <h4>Arrangør</h4>
                    @Model.Organizer.DisplayName
                    <br>
                    @if (User.Identity.IsAuthenticated && User.Identity.Name.Equals(Model.Organizer.Initials, StringComparison.CurrentCultureIgnoreCase))
                    {
                        @Html.ActionLink("ret", "Edit", new { id = Model.Id })
                        @Html.Raw("&nbsp;")
                        @Html.ActionLink("slet", "Delete", new { id = Model.Id })
                    }
                </div>
            </div>
        </div>
        @if (Model.CourseId != null)
        {
            <div id="banestats" class="row hidden">
                <div class="col-md-12">
                    <h4>Bane stats (thecup gns.)</h4>
                    <h5>slag</h5>
                    <canvas id="strokes" class="stats" width="300" height="100"></canvas>
                    <h5>putts</h5>
                    <canvas id="putts" class="stats" width="300" height="100"></canvas>
                </div>
            </div>
        }
    </div>
</div>
<br>
<div class="panel panel-default">
    <div class="panel-heading">
        <h4>Tilmeldte spillere:</h4>
    </div>

    <table class="table table-hover">
        <thead>
            <tr>
                <th>dato</th>
                <th>navn</th>
                <th>hcp</th>
                <th>dgu#</th>
            </tr>
        </thead>
        <tbody>
            @foreach (EventJoin ej in Model.Joins)
            {
                <tr>
                    <td>@ej.DateJoined.ToShortDateString()</td>
                    <td>@Html.ActionLink(ej.Player.DisplayName, "Details", "Player", new { id = ej.PlayerId }, null)</td>
                    <td>@ej.Player.Hcp</td>
                    <td>@ej.Player.MemberNumber</td>
                </tr>
            }
        </tbody>

    </table>
</div>

@Html.Partial("_Comments", Model.Comments)

@section Scripts {
@Scripts.Render("~/bundles/chart")
    <script>
        var dataOutput;
        $(document).ready(function () {
            
            var courseid = parseInt("@Model.CourseId");

            if (!isNaN(courseid)) {
                var putts = document.getElementById("putts").getContext("2d");
                var strokes = document.getElementById("strokes").getContext("2d");

                var puttOptions = {
                    scaleStartValue: 20,
                    animationSteps: 120
                }
                var strokeOptions = {
                    scaleStartValue: 60,
                    animationSteps: 120
                }

                $.getJSON("/api/Stat/", { courseid: courseid }, function (data) {
                    if (data.length > 1) {
                        $("#banestats").toggleClass("hidden");
                        var transformedData = transform(data);
                        new Chart(putts).Line(transformedData[0], puttOptions);
                        new Chart(strokes).Line(transformedData[1], strokeOptions);
                    }
                });
            }

            function transform(data) {
                var out = [{
                    labels: [],
                    datasets: [{
                        label: "thecup gns. putt",
                        fillColor: "rgba(220,220,220,0.2)",
                        strokeColor: "rgba(220,220,220,1)",
                        pointColor: "rgba(220,220,220,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(220,220,220,1)",
                        data: []
                    }]
                }, {
                    labels: [],
                    datasets: [{
                        label: "thecup gns. slag",
                        fillColor: "rgba(220,220,220,0.2)",
                        strokeColor: "rgba(220,220,220,1)",
                        pointColor: "rgba(220,220,220,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(220,220,220,1)",
                        data: []
                    }]
                }]

                for (var i = 0; i < data.length; i++) {
                    var entry = data[i];
                    out[0].labels.push(entry.year);
                    out[1].labels.push(entry.year);
                    // out 0 data 0 - user putts
                    out[0].datasets[0].data.push(Number(entry.avgputts).toFixed(2));
                    // out 1 data 0 - user strokes
                    out[1].datasets[0].data.push(Number(entry.avgstrokes).toFixed(2));
                }

                return out;
            }

        });


    </script>
}
